<template>
  <div id="app">
<!-- 头部搜索栏 -->
    <!-- 渲染页面 -->
<Search></Search>
<!-- 轮播图 -->
<Swiper></Swiper>
<!-- 商品列表栏 -->
<List></List>
<!-- 底部按钮高亮 -->
<Tabbar></Tabbar>
 
  </div>
</template>

<script>
// 导入组件
import Search from './components/Search.vue';
import Swiper from "./components/Swiper.vue";
import List from "./components/List.vue";
import Tabbar from "./components/Tabbar.vue";



export default {
// 负责注册组件
components:{
     Search,
     Swiper,
     List,
     Tabbar

     
},
  mounted(){ //这个方法会在组件挂载完成时 自动执行, 而且只执行一次
    //发送网络请求, 请求店铺列表
    axios.get('/api/shop/list').then((res)=>{
      this.shoplist = res.data.list; //保存从服务器返回的店铺列表数据, 这行代码修改了data中的响应式数据,会导致当前组件更新,组件会重新渲染
    })
    
  }


}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
ul,ol{
  list-style: none;
}
</style>
